import React, { useState, useEffect } from 'react';
import { resourcePath } from '../../../../../../utils/resource';
import { DownOutlined } from '@ant-design/icons';
import './index.less';
import { Button,Table, Descriptions, Divider, InputNumber, Radio, Dropdown, Space,Input } from 'antd';
import FxpgApi from '../../../../../../utils/apis/FxpgApi';
import Zdy from './Zdy';
import Xzh from './Xzh';
// const content = [{
//     label: <span>地质灾害</span>,
//     key: '0',
// },
// {
//     label: <span>水旱灾害</span>,
//     key: '1',
// },
// {
//     label: <span>气象灾害</span>,
//     key: '2',
// },
// {
//     label: <span>森林草原</span>,
//     key: '3',
// },
// ]
export default function Xzzh(props) {
    
   
    //选择灾害与自定义导航栏的切换
    const [qiehuan,setqiehuan] = useState(true)
    function Setqiehuan(){
        setqiehuan(false)
    }
    function Setqiehuan1(){
        setqiehuan(true)
    }
    //导航栏高亮切换
    function bjqh(){
        return qiehuan?"rgba(181, 217, 255,.5)":"transparent"
    }
    function bjqh1(){
        return qiehuan?"transparent":"rgba(181, 217, 255,.5)"
    }

    return props.tq?(<>
        <div className='xz-div' style={{
            width: 550,
            position: 'absolute',
            top: 100,
            left:100,
            bottom: 30,
            overflow: 'auto',
            background: 'rgba(0, 255, 255,0.1)',
            //pointerEvents: 'none',
            borderRadius: 8
        }}>
            <div style={{
                width:'100%',
            }}>
                 <button onClick={Setqiehuan1} style={{backgroundColor:bjqh()}}>选择灾害</button>
                 <button onClick={Setqiehuan} style={{backgroundColor:bjqh1()}}>自定义</button>
            </div>
            <Zdy qiehuan={qiehuan}/>
            <Xzh qiehuan={qiehuan}/>
            
        </div>
    </>):null;
}